<template>
    <div class="tzgg-wrapper">
        <hg-tab @change="handleClick" :list="tabList" />
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="我的收藏" name="collect"></el-tab-pane>
            <el-tab-pane label="水资源" name="水资源"></el-tab-pane>
            <el-tab-pane label="防汛抗旱" name="防汛抗旱"></el-tab-pane>
            <el-tab-pane label="水利工程" name="水利工程"></el-tab-pane>
            <el-tab-pane label="水生态水环境" name="水生态水环境"></el-tab-pane>
            <el-tab-pane label="水土保持" name="水土保持"></el-tab-pane>
            <el-tab-pane label="农村水利" name="农村水利"></el-tab-pane>
            <el-tab-pane label="行政审批" name="行政审批"></el-tab-pane>
            <el-tab-pane label="应急管理" name="应急管理"></el-tab-pane>
            <el-tab-pane label="监督执法" name="监督执法"></el-tab-pane>
            <el-tab-pane label="电子政务" name="电子政务"></el-tab-pane>
            <el-tab-pane label="河长制" name="河长制"></el-tab-pane>
        </el-tabs> -->
        <div v-for="(item, index) in tableData" :key="index">
            <div class="ibox" name="box">
                <a href="javascript:;" class="collect" title="收藏" @click="change(item.collect,item.logoid)">
                    <img class="image" :src="`/src/assets/img/${item.collect || 0}.png`" alt="收藏">
                </a>
                <a v-if="!item.link" :title="item.name" href="javascript:;" @click="noopen">
                    <img :src="base+item.path" :alt="item.name">
                    <img class="web-mark-img" src="/src/assets/img/web-dev.png">
                    <div class="appName">{{item.shortname}}</div>
                </a>
                <a v-else :title="item.name + (item.pswStr || '')" :href="item.link" target="_blank">
                    <img v-if="item.maintain" class="web-mark-img" src="/src/assets/img/web-maintain.png">
                    <img :src="base+item.path" :alt="item.name">
                    <div class="appName">{{item.shortname}}</div>
                </a>
            </div>
        </div>
        <div class="clear">
            <el-pagination class="f-r" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import hgTab from "../common/hgTab.vue";

export default {
  name: "zhyy",
  components: {
    hgTab
  },
  data: function() {
    return {
      base: "http://10.42.113.26:8080/door/uploadfiles/",
      activeTab: "all",
      currentPage: 1,
      pagesize: 27,
      total: 0,
      tableData: [],
      collectData: [],
      tabList: [
        {
          label: "全部",
          value: "all"
        },
        {
          label: "我的收藏",
          value: "collect"
        },
        {
          label: "防汛抗旱",
          value: "防汛抗旱"
        },
        {
          label: "水资源",
          value: "水资源"
        },
        {
          label: "水利工程",
          value: "水利工程"
        },
        {
          label: "水环境",
          value: "水生态水环境"
        },
        {
          label: "水土保持",
          value: "水土保持"
        },
        {
          label: "农村水利",
          value: "农村水利"
        },
        {
          label: "行政审批",
          value: "行政审批"
        },
        {
          label: "应急管理",
          value: "应急管理"
        },
        {
          label: "监督执法",
          value: "监督执法"
        },
        {
          label: "电子政务",
          value: "电子政务"
        },
        {
          label: "河长制",
          value: "河长制"
        }
      ],
      passwordDict: {
        市山洪监测: {
          username: "admin",
          password: "111111"
        },
        省防汛抗旱: {
          username: "admin",
          password: "111111"
        },
        用水统计: {
          username: "421100",
          password: "532631"
        },
        水保监管: {
          username: "黄冈市",
          password: "qwer1234"
        },
        全国农水: {
          username: "黄冈市水利局",
          password: "123456"
        },
        国节水灌溉: {
          username: "黄冈市",
          password: "123456"
        }
      }
    };
  },
  methods: {
    //获取所有数据
    getLogoCollect(data1) {
      this.total = data1.total;
      this.$$http("GET_LOGO_COLLECT", [localStorage.userid]).then(data2 => {
        for (let i = 0; i < data1.rows.length; i++) {
          var item = data1.rows[i];
          if (data2.length > 0) {
            for (let j = 0; j < data2.length; j++) {
              if (item.logoid == data2[j].logoid) {
                item.collect = 1;
                break;
              }
            }
          }
          if (item.link.indexOf("?webid=") === -1) {
            item.maintain = 1;
            if (this.passwordDict[item.shortname]) {
              var pswItem = this.passwordDict[item.shortname];
              item.pswStr =
                "\r\n用户名：" + pswItem.username + "\r\n密码：" + pswItem.password;
              console.log(item);
            }
          }
        }
        this.tableData = data1.rows;
      });
    },
    getTableData() {
      var obj = this;
      this.$$http("GET_LOGO_ALL", [
        this.currentPage,
        this.pagesize,
        localStorage.userid
      ]).then(data1 => {
        this.getLogoCollect(data1);
      });
    },
    //分页函数
    handleCurrentChange(curpage) {
      console.log("currentpage:" + curpage);
      this.currentPage = curpage;
      this.getTableData();
    },
    changeTab(val) {
      this.currentPage = 1;
      this.activeTab = val;
      this.getTableData();
    },
    handleClick(val) {
      // debugger;
      console.log(val);
      this.currentPage = 1
      if (val == "all") {
        this.activeTab = val;
        this.getTableData();
      } else if (val == "collect") {
        this.activeTab = val;
        this.$$http("GET_LOGO_COLLECT", [localStorage.userid]).then(data => {
          console.log(data);
          for (let i = 0; i < data.length; i++) {
            data[i]["collect"] = 1;
          }
          this.total = data.length;
          this.tableData = data;
        });
      } else {
        this.activeTab = val;
        this.$$http("GET_LOGO_TYPE", [
          this.currentPage,
          this.pagesize,
          encodeURI(val),
          localStorage.userid
        ]).then(data1 => {
          this.getLogoCollect(data1);
        });
      }
    },
    //修改收藏
    change(collect, logoid) {
      console.log(this.activeTab);
      console.log(collect, logoid);
      if (!collect) {
        this.$$http("ADD_LOGO", null, {
          userid: parseInt(localStorage.userid),
          logoid: logoid
        }).then(data => {
          console.log(data);
          this.handleClick(this.activeTab);
          this.$message({
            message: "已收藏",
            type: "success"
          });
        });
      } else {
        this.$$http("DELETE_LOGO", null, {
          userid: parseInt(localStorage.userid),
          logoid: logoid
        }).then(data => {
          console.log(data);
          this.handleClick(this.activeTab);
          this.$message({
            message: "取消收藏",
            type: "warning"
          });
        });
      }
    },
    noopen() {
      this.$message.error("暂时还没有添加该网站");
    }
  },
  mounted() {
    this.getTableData();
  }
};
</script>

<style>
a {
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: #ef3838;
  transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  -webkit-transition-duration: 400ms;
  -o-transition-duration: 400ms;
}

.clear {
  clear: both;
}

.collect {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  /*background: yellow;*/
}

.collect img {
  width: 20px !important;
  height: 20px !important;
}

.ibox {
  position: relative;
  padding-top: 20px;
  padding-left: 5px;
  padding-right: 5px;
  float: left;
  height: 100px;
  width: 100px;
  background-color: #f2f2f2;
  text-align: center;
  margin: 20px 20px 10px 13px;
}

.ibox img {
  width: 40px;
  height: 40px;
}

.appName {
  width: 100%;
  height: 40px;
  text-align: center;
  padding-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appName:hover {
  text-align: center;
  padding-top: 10px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.web-mark-img {
  position: absolute;
  top: -7px;
  left: -7px;
  height: 60px !important;
  width: 60px !important;
}
</style>